<script setup lang="ts">
import { stringUtils } from 'my-ts-core';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

import { useUpdater } from '@/features/app-updater/composables/use-updater';

const { t } = useI18n();
const { newVersion, totalLength, downloadedLength, errorMessage } = useUpdater();

const percentage = computed(() => {
  if (totalLength.value == 0) {
    return 0;
  }

  const result = ((downloadedLength.value / totalLength.value) * 100).toFixed(0);

  return parseFloat(result);
});

const errorInfo = computed(() => {
  if (stringUtils.isNullOrUndefinedOrEmptyString(errorMessage.value)) {
    return '';
  }

  return t('appUpgradeFailed', { ex: errorMessage.value });
});
</script>

<template>
  <div class="main-container">
    <div class="main-container" v-if="!errorInfo">
      <el-progress type="circle" :percentage />
      <span class="info-text">{{ t('appUpgradeInfo', { newVersion }) }}</span>
    </div>
    <span v-else class="error-info">{{ errorInfo }}</span>
  </div>
</template>

<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.info-text {
  margin-top: 20px;
  font-size: 1.3rem;
  color: #5a5858;
}

.error-info {
  font-size: 1.8rem;
  color: #ed2d2d;
}
</style>
